<template>
	<view>
		<!-- 订单状态顶部展示 S -->
		<view class="detail-top level_align" :style="{ height: orderStatus == 1 ? '174rpx' : '124rpx' }">
			<view v-if="[0, 1].includes(orderStatus - 0)" class="flex flex_column tp-ptb0lr30 tp-fz30 tp-fcF">
				<view class="level_align tp-fz36 tp-fw600">
					{{ statusVo.statusDesc || "" }}
				</view>
				<view class="tp-fz22 tp-lh44 tp-fcF_8">
					您的方案将于5个工作日内进行接单，若超时未接单，将为您取消订单，敬请谅解。
				</view>
			</view>
			<view v-else class="level_align flex_between tp-ptb0lr30 tp-fz30 tp-fc333 tp-w100">
				<view class="level_align">
					<image v-if="[4].includes(orderStatus - 0)" class="tp-img44 tp-mr20" src="../static/hotel-daizhifu.png" mode=""></image>
					<image v-if="[3, 5, 6, 10].includes(orderStatus - 0)" class="tp-img44 tp-mr20" src="../static/hotel-daishiyong.png"
					 mode=""></image>
					<image v-if="[7, 12, 13].includes(orderStatus - 0)" class="tp-img44 tp-mr20" src="../static/hotel-daipingjia.png"
					 mode=""></image>
					<image v-if="[8, 11].includes(orderStatus - 0)" class="tp-img44 tp-mr20" src="../static/hotel-finish.png" mode=""></image>
					<image v-if="[9].includes(orderStatus - 0)" class="tp-img44 tp-mr20" src="../static/hotel-tuikuan.png" mode=""></image>
					<view class="level_align tp-fcF">
						{{ statusVo.statusDesc || "--" }}
						<text v-if="[4].includes(orderStatus - 0)">{{ " ￥" + statusVo.totalRealAmount || "--" }}</text>
						
					</view>
				</view>
				<view v-if="[ 3, 4, 5, 6, 7, 8, 9, 10,11].includes(orderStatus - 0)" @click="pageJumps('/pagesSecond/make/makeDetail?id=' + orderId)"
				 class="tp-ptb0lr20 tp-lh54 tp-fcF tp-fz26 tp-border1 tp-br8" style="border-color: #fff">
					查看方案
				</view>
			</view>
		</view>
		<!-- 订单状态顶部展示 E -->

		<view class="level_align flex_between tp-pd30 tp-bcblue">
			<view class="flex-1 flex flex_column tp-fz30 tp-fc333">
				<view class="level_align tp-lh54">
					<text class="tp-mr10">出发地：</text><text class="tp-fw600">{{ statusVo.startCity || "--" }}</text>
				</view>
				<view class="level_align tp-lh54">
					<text class="tp-mr10">目的地：</text><text class="tp-fw600 flex-1 ellispsis1">{{ statusVo.endCitys || "--" }}</text>
				</view>
				<view class="level_align tp-mt10" v-if="orderStatus < 1">
					<text class="tp-fc666 tp-mr10">出行日期：</text><text>{{ statusVo.startTime || "--" }}至{{ statusVo.outTime || "--" }}(共{{ statusVo.travelDay || "--" }}天) </text>
				</view>
			</view>
		</view>

		<!-- 定制详情 S -->
		<view class="tp-bgf tp-ptb0lr30 tp-pb20 tp-pt20 tp-mt20">
			<view class="tp-bgf level_align flex_between tp-pr tp-h64" v-if="orderStatus < 3 ">
				<view class="level_align tp-fc333 tp-fz30 ">
					<view class="tp-mr20 lan-line"></view>
					<text>定制详情</text>
				</view>
			</view>
			<view class="tp-bgf level_align flex_between tp-pr  tp-h64" v-else @click="pageJumps('../makeDetail?id=' + orderId)">
				<view class="level_align tp-fc333 tp-fz30 ">
					<view class="tp-mr20 lan-line"></view>
					<text>定制详情</text>
				</view>
				<uni-icons type="arrowright" size="20" color="#666"></uni-icons>
			</view>
			<view class="flex flex_column tp-fz28 tp-fc333 tp-lh54 tp-mt15 tp-pb20">
				<view class="level_align">
					<text class="tp-fc666 tp-mr10">方案类型：</text><text>{{statusVo.applyTypeDesc || '--'}}</text>
				</view>
				<view class="level_align">
					<text class="tp-fc666 tp-mr10"><text class="tp-mr20">姓 </text><text class="tp-mr40"></text> 名：</text><text>{{statusVo.name || '--'}}</text>
				</view>
				<view class="level_align">
					<text class="tp-fc666 tp-mr10">联系电话：</text><text>{{statusVo.phone || '--'}}</text>
				</view>
				<view class="level_align" v-if="isTeam">
					<text class="tp-fc666 tp-mr10">团建名称：</text><text>{{statusVo.teamName  || '--'}}</text>
				</view>
				<view class="level_align  tp-pb20" v-if="statusVo.email">
					<text class="tp-fc666 tp-mr10"><text class="tp-mr20">邮 </text><text class="tp-mr40"></text> 箱：</text><text>{{statusVo.email}}
					</text>
				</view>
				<view class="" v-if="orderStatus < 3 ">
					<view class="tp-h2 tp-bcF5"></view>
					<view class="level_align tp-mt20">
						<text class="tp-fc666 tp-mr10">出行日期：</text><text>{{statusVo.startTime || '--'}}至{{statusVo.outTime || '--'}}(共{{statusVo.travelDay || '--'}}天)
						</text>
					</view>
					<view class="level_align" v-if="statusVo.memberNum">
						<text class="tp-fc666 tp-mr10">出行人数：</text><text>{{statusVo.memberNum}}人</text>
					</view>
					<view class="level_align tp-bdbm tp-pb20" v-if="statusVo.yuSuan">
						<text class="tp-fc666 tp-mr10">人均预算：</text><text>{{statusVo.yuSuan}}元 </text>
					</view>
					<view class="" v-if="!isTeam">
						<view class="tp-fc666 tp-lh64 tp-mt10">
							需要提供服务:
						</view>
						<view class="tp-bgf tp-pb20 level_align flex_wrap">
							<view class="tp-ptb0lr20 tp-lh44  tp-br8 tp-dib tp-mt20 tp-mr20 tp-bc tp-fcF" v-for="(item,index) in info.serverList"
							 :key="index">
								{{item}}
							</view>
						</view>
					</view>
					<view class="" v-if="isTeam">
						<view class="tp-fc666 tp-lh64 tp-mt10">
							定制主题:
						</view>
						<view class="tp-bgf tp-pb20 level_align flex_wrap">
							<view class="tp-ptb0lr20 tp-lh44  tp-br8 tp-dib tp-mt20 tp-mr20 tp-bc tp-fcF" v-for="(item,index) in info.serverList"
							 :key="index">
								{{item}}
							</view>
						</view>
					</view>
					<view class="tp-fc666 tp-lh64" v-if="info.remark">
						其他服务:
					</view>
					<view class="tp-fc333" v-if="info.remark">
						{{info.remark || '--'}}
					</view>
				</view>

			</view>
		</view>
		<!-- 定制详情 E -->

		<!-- 出行人信息 S -->
		<view class="tp-bgf tp-ptb0lr30 tp-pb20 tp-pt20 tp-mt20" v-if="orderStatus > 3">
			<view class="tp-bgf level_align flex_between tp-pr tp-h64">
				<view class="level_align tp-fc333 tp-fz30">
					<view class="tp-mr20 lan-line"></view>
					<text>出行人信息</text>
				</view>
				<view class="" v-if="orderMemberVoList.length > 2">
					<uni-icons type="arrowdown" size="22" color="#999" @click="showMoreMan = !showMoreMan" v-if="!showMoreMan"></uni-icons>
					<uni-icons type="arrowup" size="22" color="#999" @click="showMoreMan = !showMoreMan" v-else></uni-icons>
				</view>
			</view>
			<view class="tp-ofh tp-pd20" :style="{ height: showMoreMan ? `${64 * orderMemberVoList.length}rpx` : '128rpx', }">
				<view class="level_align tp-fz28 tp-fc333 tp-lh64" v-for="(item, index) in orderMemberVoList" :key="index">
					<text class="tp-fz30 tp-fw600 ellispsis1 tp-mr20" style="max-width: 180rpx">{{ item.passengerName }}</text>
					<text class="tp-mr20">{{ item.phone }}</text>
					<text class="">{{ item.star }}</text>
				</view>
			</view>

			<!-- 二维码展示 S -->
			<view class="tp-mt20" style="border-top: 1px solid #ededed ;" v-if="orderStatus > 4">
				<CommonCode :code="info.voucherCode" :used="[7,8].includes(orderStatus - 0)" :expired="[9, 10, 11, 12, 13].includes(orderStatus - 0)"
				 :url="statusVo.qrCode" :timeOut="true" :codeStatus="'凭证码'" :showUrl="false"></CommonCode>
			</view>
			<!-- 二维码展示 E -->
		</view>
		<!-- 出行人信息 E -->

		<!-- 订单信息 S -->
		<view class="tp-bgf tp-ptb0lr30 tp-pb20 tp-pt20 tp-mt20">
			<view class="tp-bgf level_align flex_between tp-pr tp-h64">
				<view class="level_align tp-fc333 tp-fz30">
					<view class="tp-mr20 lan-line"></view>
					<text>订单信息</text>
				</view>
			</view>
			<view class="flex flex_column tp-fz28 tp-fc333 tp-lh54 tp-mt15 tp-pb20">
				<view class="level_align">
					<text class="tp-fc666 tp-mr10">需求单号：</text><text>{{ info.orderNo || "--" }}</text>
				</view>
				<view class="level_align">
					<text class="tp-fc666 tp-mr10">申请时间：</text><text>{{ info.createTime || "--" }}</text>
				</view>
				<view class="level_align" v-if="info.customizedTime">
					<text class="tp-fc666 tp-mr10">定制时间：</text><text>{{ info.customizedTime || "--" }}</text>
				</view>
				<view class="level_align" v-if="info.confirmTime">
					<text class="tp-fc666 tp-mr10">确认时间：</text><text>{{ info.confirmTime || "--" }}</text>
				</view>
				<view class="level_align" v-if="info.payTime">
					<text class="tp-fc666 tp-mr10">支付时间：</text><text>{{ info.payTime || "--" }}</text>
				</view>
				<view class="level_align" v-if="info.payTypeDesc">
					<text class="tp-fc666 tp-mr10">支付方式：</text><text>{{ info.payTypeDesc }}</text>
				</view>
				<view class="level_align" v-if="info.cancelTime">
					<text class="tp-fc666 tp-mr10">取消时间：</text><text>{{ info.cancelTime || "--" }}</text>
				</view>
				<view class="level_align" v-if="info.refundCheckTime">
					<text class="tp-fc666 tp-mr10">审核时间：</text><text>{{ info.refundCheckTime || "--" }}</text>
				</view>
			</view>
		</view>
		<!-- 订单信息 E -->

		<!-- 核销信息 S -->
		<view class="tp-bgf tp-ptb0lr30 tp-pb20 tp-pt20 tp-mt20" v-if="orderStatus > 5 && orderStatus < 9 && checkHistorys.length">
			<view class="tp-bgf level_align flex_between tp-pr  tp-h64">
				<view class="level_align tp-fc333 tp-fz30 ">
					<view class="tp-mr20 lan-line"></view>
					<text>核销信息</text>
				</view>
				<view class="" v-if="checkHistorys.length > 2">
					<uni-icons type="arrowdown" size="24" color="#999" @click="showMoreOrderInfo = !showMoreOrderInfo" v-if="!showMoreOrderInfo"></uni-icons>
					<uni-icons type="arrowup" size="24" color="#999" @click="showMoreOrderInfo = !showMoreOrderInfo" v-else></uni-icons>
				</view>
			</view>
			<view class="tp-ofh tp-pb20" :style="{height: showMoreOrderInfo?`${54* (checkHistorys.length) }rpx`:'108rpx'}">
				<view class="flex flex_column tp-fz28 tp-fc333 tp-lh54 tp-mt15 tp-pb20">
					<view class="level_align tp-lh54" v-for="(item,index) in checkHistorys" :key="index">
						<text class="tp-fc666 tp-mr10">核销（{{item.shopType}}）：</text><text>{{item.checkTime}}</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 核销信息 E -->
		<!-- 客服 S -->
		<view class="kefu-fixed" @click="handleKeFu">
			<image src="../static/kefu2.png" mode=""></image>
		</view>
		<!-- 客服 E -->
		<!-- 
		<view class="tp-ptb0lr30 tp-mt20">
			<view class="tp-pd30 tp-bgf tp-bbox level_align flex_between tp-br12">
				<view class="level_align">
					<image class="tp-img44 tp-mr15" src="../static/xing0.png" mode=""></image>
					<image v-if="false" class="tp-img44 tp-mr15" src="../static/xing1.png" mode=""></image><text>收藏</text>
				</view>
				<view class="order-line"></view>
				<view class="level_align">
					<image class="tp-img44 tp-mr15" src="../static/fenxiagn.png" mode=""></image><text>分享</text>
				</view>
				<view class="order-line"></view>
				<view class="level_align">
					<image class="tp-img44 tp-mr15" src="../static/kefu.png" mode=""></image><text>客服</text>
				</view>
			</view>
		</view> -->

		<!-- 底部按钮栏 S -->
		<view v-if="[0,1,3,4,6,7,8,9,10,11,12,13].includes(orderStatus - 0)" class="tp-h98 tp-btn-h100 flex_end level_align tp-bgf tp-fz30"
		 style="z-index: 20;">
			<view v-if="[4].includes(orderStatus - 0)" @click="NoPayCancel" class="btn tp-ptb0lr20 tp-h56 center_combo tp-bcF5 tp-br12 tp-fc666 tp-mr30">
				取消订单
			</view>
			<view v-if="[0,1,3].includes(orderStatus - 0)" @click="giveUp" class="btn tp-ptb0lr30 tp-h72 center_combo tp-bgf tp-br12 tp-fc999 tp-border1 tp-mr30">
				取消定制
			</view>
			<view v-if="[8,11,12,13].includes(orderStatus - 0)" @click="removeOrder" class="btn tp-ptb0lr20 tp-h56 center_combo tp-bcF5 tp-br12 tp-fc666 tp-mr30">
				删除订单
			</view>
			<view v-if="[3].includes(orderStatus - 0)" @click="backApply" class="btn tp-ptb0lr20 tp-h56 center_combo tp-bgf tp-br12 tp-fc tp-border1 tp-mr30"
			 style="border-color: #00B4FF;">
				重新定制
			</view>
			<view v-if="[3].includes(orderStatus - 0)" @click="pageJumps('../makeOrderSubmit?id=' + orderId)" class="btn tp-ptb0lr20 tp-h56 center_combo tp-bc tp-br12 tp-fcF tp-mr30">
				确认定制
			</view>
			<view v-if="[4].includes(orderStatus - 0)" @click="handePay" class="btn tp-ptb0lr20 tp-h56 center_combo tp-bc tp-br12 tp-fcF tp-mr30">
				去支付
			</view>
			<view v-if="[6,10].includes(orderStatus - 0)" @click="handeRefundDect" class="btn tp-ptb0lr30 tp-h72 center_combo tp-bcF5 tp-br12 tp-fc666 tp-mr30">
				申请退款
			</view>
			<view v-if="[9].includes(orderStatus - 0)" @click="pageJumps('../refundSchedule?pageName=make&orderId=' + orderId)" class="btn tp-ptb0lr30 tp-h72 center_combo tp-bc tp-br12 tp-fcF tp-mr30">
				退款进度
			</view>
			<view v-if="[7].includes(orderStatus - 0)" @click="pageJumps('../hotelEvaluate?pageName=make&id='+ orderId + '&orderNo=' + info.orderNo)" class="btn tp-ptb0lr30 tp-h72 center_combo tp-bc tp-br12 tp-fcF tp-mr30">
				立即评价
			</view>
			<view v-if="[8].includes(orderStatus - 0)" @click="pageJumps('../hotelEvaluate?pageType=1&pageName=make&id='+ orderId)" class="btn tp-ptb0lr30 tp-h72 center_combo tp-bc tp-br12 tp-fcF tp-mr30">
				查看评价
			</view>
		</view>
		<!-- 底部按钮栏 E -->
		<view class="tp-h98 tp-mt20"></view>
		<view class="tp-h98 tp-mt20"></view>

		<!-- 支付 -->
		<CommonPaySecond ref="commonPay" :price="statusVo.totalRealAmount" :orderInfo="orderInfo" @payMoney="payMoney"
		 @wechatPaySuccess="wechatPaySuccess"></CommonPaySecond>
		 
		 <!-- 客服服务电话弹框 S-->
		 <CommonServicePhone ref="takePhone" type="9"></CommonServicePhone>
		 <!-- 客服服务电话痰喘 E-->
	</view>
</template>

<script>
	import CommonCode from "@/components/common/common-code.vue";
	import utils from "../../utils/utils.js";
	import CommonPaySecond from '../common/common-pay-second.vue'
	import CommonServicePhone from '@/components/common/common-servicePhone.vue'
	export default {
		components: {
			CommonCode,
			CommonPaySecond,
			CommonServicePhone
		},
		data() {
			return {
				orderStatus: -1, // 订单状态  1 审核中
				orderId: "", //订单id
				orderNo: "", // 订单编号
				info: {}, // 页面数据
				isTeam: true, // true 团队  false 个人
				checkArr: [],
				showMoreMan: false, //  是否查看更多出行人明细
				checkHistorys: [], // 核销记录
				showMoreOrderInfo: false, //  是否查看更多核销明细

				statusVo: {}, //	订单基本信息
				orderMemberVoList: [], //	成员列表对象
			};
		},
		onLoad(opt) {
			this.orderId = opt.id;
		},
		onShow() {
			this.getPageInfo();
		},
		// 下拉刷新
		onPullDownRefresh() {
			this.getPageInfo();
		},
		computed: {
			orderInfo() {
				let o = {
					orderId: this.orderId,
					type: 1,
					orderType: 4
				}
				return o
			},
		},
		methods: {
			// 申请退款
			handeRefundDect() {
				let data = {
					orderId: this.orderId,
					applyForMoney: this.statusVo.totalRealAmount,
					refundPhone: this.statusVo.phone,
					travelStart: this.statusVo.startTime,
					travelEnd: this.statusVo.outTime,
				}
				uni.navigateTo({
					url: '../hotelApplyForMoney?pageName=make&info=' + JSON.stringify(data)
				})
			},
			// 立即支付
			handePay() {
				this.$refs.commonPay.show()
			},
			// 余额支付成功
			payMoney(pwd) {
				this.$http.post(this.$api.payCustomizedOrderByYue, {
					orderId: this.orderId,
					payWord: pwd
				}).then(res => {
					if (res.code === 200) { // 密码正确，支付成功
						this.$refs.commonPay.closeKeyBoard()
						this.getPageInfo()
						uni.showToast({
							title: '支付成功'
						})
					}
				})
			},
			// 微信支付成功
			wechatPaySuccess() {
				this.$refs.commonPay.close()
				uni.showToast({
					title: '支付成功'
				})

			},
			// 重新定制
			backApply() {
				this.$http.get(this.$api.backApply + '?orderId=' + this.orderId).then(res => {
					if (res.code === 200) {
						this.getPageInfo();
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				})
			},
			// 未支付取消订单 待支付
			NoPayCancel() {
				this.$http.get(this.$api.makeNoPayCancel + '?orderId=' + this.orderId).then(res => {
					if (res.code === 200) {
						uni.showToast({
							title: '取消成功',
							icon: 'none'
						})
						setTimeout(() => {
							uni.navigateBack({
								delta: 1
							})
						}, 600)
					}
				})
			},
			// 放弃定制  待支付之前
			giveUp() {
				this.$http.get(this.$api.giveUp + '?orderId=' + this.orderId).then(res => {
					if (res.code === 200) {
						uni.showToast({
							title: '取消成功',
							icon: 'none'
						})
						setTimeout(() => {
							uni.navigateBack({
								delta: 1
							})
						}, 600)
					}
				})
			},
			// 删除订单
			removeOrder() {
				this.$http.get(this.$api.makeRemoveTravelGroupOrder + '?orderId=' + this.orderId).then(res => {
					if (res.code === 200) {
						uni.showToast({
							title: '删除订单',
							icon: 'none'
						})
						setTimeout(() => {
							uni.navigateBack({
								delta: 1
							})
						}, 600)
					}
				})
			},
			// 获取页面数据
			getPageInfo() {
				this.$http
					.get(this.$api.customizedStatusDesc + "?orderId=" + this.orderId)
					.then((res) => {
						uni.stopPullDownRefresh();
						if (res.code === 200) {
							this.info = res.data;
							this.statusVo = res.data.statusVo;
							this.orderMemberVoList = res.data.orderMemberVoList || []
							this.checkHistorys = res.data.checkHistorys || []
							this.orderStatus = res.data.statusVo.status;
							this.isTeam =
								res.data.statusVo.applyTypeDesc == "个人定制" ? false : true;
							if (this.orderMemberVoList && this.orderMemberVoList.length) {
								this.orderMemberVoList.map((item) => {
									item.star = utils.employStarHidden(item.certificateNumber, 4, 4);
								});
							}
						}
					});
			},
			// 点击客服
			handleKeFu() {
				this.$refs.takePhone.show()
			},
		},
	};
</script>

<style lang="scss" scoped>
	.detail-top {
		height: 124rpx;
		background: url(../static/travel-orderdetail-bg.png) no-repeat;
		background-color: #00b4ff;
		background-size: 100%;
		background-position: center center;
	}

	.goods-img {
		width: 200rpx;
		height: 120rpx;
	}

	.order-line {
		width: 2rpx;
		height: 44rpx;
		background: #ebebeb;
	}
	.kefu-fixed {
		position: fixed;
		right: 60rpx;
		bottom: 200rpx;
		width: 100rpx;
		height: 100rpx;
	}
</style>
